<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改规格')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
      <form class="form-horizontal m" id="form-sepc-edit" action="">
       <input name="modelId" th:value="${modelId}" type="hidden" >
        <div class="row">
			<div class="col-sm-12 select-table table-bordered">
				<table id="spec-table"></table>
			</div>
		</div>
	  </form>	
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript" type="text/javascript">
        var prefix = ctx + "shop/goods/model";
    	var specJson = [[${specJson}]];
    	var data= eval(specJson);
        $(function() {
			var options = {
			    id: "spec-table",	
				data: data,
				pagination: false,
				showSearch: false,
				showRefresh: false,
				showToggle: false,
				showColumns: false,
				sidePagination: "client",
				columns: [{
					field: 'index',
					align: 'center',
					title: "序号",
					formatter: function (value, row, index) {
						var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
						return columnIndex + $.table.serialNumber(index);
					}
				}, {
					field: 'key',
					align: 'center',
					title: '规格名称',
					formatter: function(value, row, index) {
						var html = $.common.sprintf("<input class='form-control' type='text' name='specList[%s].attrName' value='%s'>", index, value);
						return html;
					}
				},
				{
					field: 'values',
					align: 'center',
					title: '选项值(以","分隔)',
					formatter: function(value, row, index) {
						var html = $.common.sprintf("<input class='form-control' type='text' name='specList[%s].attrValues' value='%s'>", index, value);
						return html;
					}
				},
				{
					field: 'sort',
					align: 'center',
					title: '排序号',
					formatter: function(value, row, index) {
						var html = $.common.sprintf("<input class='form-control' type='number' name='specList[%s].sort' value='%s'>", index, value);
						return html;
					}
				},
				{
					title: '操作',
					align: 'center',
					formatter: function(value, row, index) {
						 var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
						var actions = [];
						actions.push('<a class="btn btn-primary btn-xs " href="javascript:void(0)" onclick="selectSpec(\'' + value + '\')"><i class="fa fa-check-square-o"></i>选择</a> ');
						if (index == 0) {
							actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="addSpec()"><i class="fa fa-plus"></i>增加</a>');
						} else {
							actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value+ '\')"><i class="fa fa-remove"></i>删除</a>');
						}
						return actions.join('');
					}
				}]
			};
			$.table.init(options);
        });
    	
    	//新增规格
		function addSpec() {
			var count = $("#spec-table").bootstrapTable('getData').length;
			var row = {
				index: $.table.serialNumber(count),
				key: "",
				values: "",
				sort: count + 1
			}
			sub.addRow(row);
		}
		
		function selectSpec(index) {
			var options = {
					title: '选择规格',
					width:900,
					height:600,
					url: ctx + "shop/attr/selectSpec" ,
				callBack: function (index, layero) {
					var rows = layero.find("iframe")[0].contentWindow.getSelections();
					if (rows.length == 0) {
						$.modal.alertWarning("请至少选择一条记录");
						return;
					}
					var data = {key: rows[0].attrName,values: rows[0].attrValues};
					$("#spec-table").bootstrapTable('updateRow', {index: index, row: data})
					$.modal.close(index);
				}
			};
			$.modal.openOptions(options);
		}

		function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/editSpec", $('#form-sepc-edit').serialize());
            }
        }

    </script>
</body>
</html>